<!DOCTYPE html>
<html>
	<head>
		<!--meta元信息，charset字符集，utf-8 -->
		<meta charset="utf-8"/>
		<title>永和小票</title>
		<!--样式设计写在style标签中-->
		<style>
			body{/*对整个页面进行样式修饰*/
				width:310px;
			    font-size: 10px;/*字体大小*/
		        font-weight: bold;/*字体加粗*/
			}
			
			/*对于单独样式进行设置*/
			.please{
				font-size: 24px;
			}
			.self{
				/*padding修饰4周 上右下左（顺时针一圈4个值）*/
				padding-left: 80px;
				/*padding:10px 10px 10px 10px;/*左边空一定距离*/
			}
			hr{ 
				border: 0.5px dashed;/*solid是实线,dashed是虚线*/
			}
			.note{
				/* padding-bottom: 20px;
				padding-top: 20px; */
				margin-top: 20px;
				margin-bottom: 15px;
			}
			.img{
				padding-left: 50px;
			}
					</style>
	</head>
	<body>
		<!--div标签会自动换行，span标签是不换行-->
		<div>顾客联</div>
		<div class="please">请您留意取餐账单号</div>
		
		<div class="self">自取顾客联</div>
		<div>永和大王（北三环西路店）</div>
		<div>020-13302258476</div>
		<div class="self">--结账单--</div>
		<div class="please">账单号：P000010</div>
		<div>账单类型：堂食</div>
		<div>人数：1</div>
		<div>收银员：张迎龙</div>
		<div>开单时间：2021-02-02</div>
		<div>结账时间：2021-02-02</div>
		
		<hr /> 
		<!--表格是没有列概念，它叫做单元格-->
		<!--align横向排列：left居左，center居中，right居右
		valign纵向排列：top居上，center居中，bottom居下-->
		<!--table是表格，tr是行，td是单元格-->
		<table border="0">
			<tr>
				<td width="50" align="left">数量</td>
				<td width="190">品项</td>
				<td width="80" align="center">金额</td>
			</tr>
			<tr>
				<td valign="top">1</td>
				<!--网页中没有换行，解析一个空格，必须用br来换行-->
			<td>玉米肉松蛋饼2p<br />
			1 X --玉米肉松蛋饼<br />
			1 X --现磨豆浆 （热、甜）
			</td>
			<td valign="top" align="right">8000.00</td>
			</tr>
		</table>
		<table border="1">
			<tr>
				<td width="255" align="left">合计</td>
				<td width="80" align="right">8000.00</td>
			</tr>
			<tr>
				<td>微信支付</td>
				<td align="right">8000.00</td>
			</tr>
		</table>
		<hr />
		<div>打印时间：2021年2月2日15:39:42</div>
		<hr />
		
		<!--&nbsp;代表一个空格，七个空格等于两个汉字的距离-->
		<div class="note">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		根据相关税法规定，电子发票的开票日期同网上申请
		电子发票的日期，如您需要当日的电子发票请务必在消费当日通
		过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。</div>
	
	<!--引入图片
	src配置图片来源，相对路径，从自己html文件出发去找html所在目录下
	的images目录，只设置宽度，高度会自动算，等比缩放-->
	<img class="img" src="images/1.jpg" width="150"  /">
	
	<div>官网：www.yonghe.com.cn</div>
	<div>加盟热线：020-13302258476</div>
	<br /><br />
	</body>
</html>
